<template>
	<view class="main">
		<view class="main-filter">
			<view class="main-filter-pager">
				<view :class="active!=index?'main-filter-pager-item':'main-filter-pager-activeItem'" v-for="(item,index) in pages" :key="index" @click="active=index">
					{{item.text}}
					<view v-if="active==index" style="width: 52rpx;height: 6rpx;background: #FBC241;opacity: 1;border-radius: 4rpx;"></view>
				</view>
			</view>
		</view>
		<view class="main-filter-seat"></view>
		<view class="main-content">
			<unpaid v-if="active===0" :list="list"></unpaid>
			<paid v-if="active===1" :list="list"></paid>
			<finish v-if="active===2" :list="list"></finish>
			<cancel v-if="active===3" :list="list"></cancel>
		</view>
	</view>
</template>

<script>
	import unpaid from './components/unpaid/unpaid.vue';
	import paid from './components/paid/paid.vue';
	import finish from './components/finish/finish.vue';
	import cancel from './components/cancel/cancel.vue';
	export default{
		components:{
			unpaid,
			paid,
			finish,
			cancel
		},
		data(){
			return {
				active:0,
				pages:[{
					text:'待付款'
				},{
					text:'待收货'
				},{
					text:'已完成'
				},{
					text:'已取消'
				}],
				list:[0,1]
			}
		},
		onLoad(param){
			const that=this;
			console.log(param);
		},
		methods:{

		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>

<style lang="scss">
	.main{
		background: #FFFFFF;
		opacity: 0.75;
		.main-filter {
			background: #FFFFFF;
			opacity: 1;
			position: fixed;
			z-index: 10;
			height: 104upx;
			width: 100%;
			.main-filter-pager{
				margin-top: 40upx;
				display: flex;
				align-items:flex-end;
				justify-content: space-around;
				.main-filter-pager-item{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 34upx;
					color: #666666;
					opacity: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.main-filter-pager-activeItem{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40upx;
					color: #333333;
					opacity: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
		.main-filter-seat{
			height: 104upx;
		}
	}
</style>
